<div data-bb-type="screen" data-bb-effect="slide-left">
		<div data-bb-type="round-panel"> 
			<div data-bb-type="panel-header">Info Menu</div>
				<div data-bb-type="label">Click to see the tutorial for each feature.</div>
				<div id="list" data-bb-type="image-list" data-bb-images="none" data-bb-style="arrowbuttons" data-bb-header-justify="left">
					<div data-bb-type="item" onbtnclick="document.getElementById('GPAInfo').show();" data-bb-title="GPA"></div>
										<div data-bb-type="item" onbtnclick="document.getElementById('AmbitionInfo').show();" data-bb-title="Ambition"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('ScoreInfo').show();" data-bb-title="Score"></div>
				</div>
		</div>
		
		<div data-bb-type="round-panel" id="AmbitionInfo" style="display:none">
		<div data-bb-type="scroll-panel" style="height:600px;">
			<div data-bb-type="panel-header">Ambition mode</div>
				<div>★ This mode can show you how much GPA needed to reach your target GPA based on your current GPA and credits taken.</div> 
				<div>★ You also can adjust how many credits you should take to reach your target GPA.</div>
				<div>★ For your convenience, you can retrieve your current GPA and credits taken from the GPA mode.</div>
			   <div data-bb-type="button" data-bb-style="stretch" onclick="document.getElementById('AmbitionInfo').hide();">Close</div>
		</div>
		</div>
		
		<div data-bb-type="round-panel" id="GPAInfo" style="display:none">
			<div data-bb-type="scroll-panel" style="height:600px;">
				<div data-bb-type="panel-header">GPA mode</div>
					<div>★ Have you ever tried to calculate your future cumulative GPA  before the result of your current semester are out? With this useful yet simple app, you won't need your calculator no more!</div> 
					<div>★ Once you discover it, you set what grades needed in each course for the current semester to prevent your cumulative GPA from falling down. Better late than never! </div>
					<div>★ Also, you will get a bonus of unofficial transcript on your phone. What's better than that?</div>
					<div>★ It's as simple as adding a sufficient information of courses that you've taken.</div>
				<div data-bb-type="panel-header">How to add new course</div>
					<div>1. Click "+" button on the upper right side to add new course.</div>
					<div>2. Fill the fields with your course name, year, term, and score. You can change the term format into numerical (1/2/3/4) or seasonal (spring, summer, autumn, winter) in the settings tab. You can also define the grade scales according to your college / university.</div>
					<div>3. Click "Add course" to finish</div>
				<div data-bb-type="panel-header">How to edit / delete course</div>
					<div>1. Click the arrow button on the semester list to see the course details on each semester.</div>
					<div>2. Click the arrow button on the course list.</div>
					<div>3. Edit the fields and click "Save this course" to save the changes.</div>
					<div>4. Click "Delete this course" to delete the course.</div> 
			   <div data-bb-type="button" data-bb-style="stretch" onclick="document.getElementById('GPAInfo').hide();">Close</div>
			</div>
		</div>
		
		<div data-bb-type="round-panel" id="ScoreInfo" style="display:none">
			<div data-bb-type="scroll-panel" style="height:600px;">
				<div data-bb-type="panel-header">Score mode</div>
					<div>★ This mode will calculate your final score by adding the weight and your score for each course sections, such as assignment, homework, mid term, etc.</div> 
					<div>★ You also can easily change the score and re-calculate the final score so you will know should you do to keep your score after failing the mid term test :)</div>				
				<div data-bb-type="panel-header">How to add new section</div>
					<div>1. Click "Add New Section" on the Score Mode.</div>
					<div>2. Fill the fields with section name, weight and your score in this section.</div>
					<div>3. Click "Add section" to finish</div>
					<div> </div>
				<div data-bb-type="panel-header">How to edit / delete section</div>
					<div>1. Click the arrow button on the section list.</div>
					<div>3. Edit the fields and click "Save this section" to save the changes.</div>
					<div>4. Click "Delete this sourse" to delete the section.</div>
			   <div data-bb-type="button" data-bb-style="stretch" onclick="document.getElementById('ScoreInfo').hide();">Close</div>
		</div>
		</div>
		
	<div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
	
	
	